<template>
    <div class="AllBox">
        <div class="title">
            <div id="number">02</div>
            <div id="des">{{changeText.des}}</div>
        </div>

        <div class="Gbox">
            <div class="Fbox">

                <div class="leftbox">
                    <div class="logo">
                        <img @click="backindex" src="../../public/img/logo.png">
                    </div>
                    <div id="something">{{changeText.welcome}}</div>
                </div>

                <div class="Cbox">  
                    <div class="CboxContent">
                        <div class="languagebox">
                            <select name="language" class="language" v-model="selected">
                                <option v-for="(item, key) in option.optionArr" :value="key" v-bind:key="key">{{item}}</option>
                            </select>
                            
                        </div>
                        <div class="loginBox">
                            <div class="logincommit">{{changeText.logincommit}}</div>     
                            <div class="here">- {{changeText.here}} -</div>
                            <input type="text" name="name" id="name" :placeholder="username" v-model="userName">
                            <input type="text" name="Phone Number" id="phonenumber" :placeholder="userPhoneNumber" v-model="phone">
                            <input type="password" name="Password" id="password" :placeholder="userPassword" v-model="password">
                            <button class="loginBtn" @click="userRegister">{{changeText.loginBtn}}</button>
                            <div class="toregister">{{changeText.underBtn}}<router-link class="register" href="#" to="/login">{{changeText.afterUnderBtn}}</router-link></div>
                        </div>
                        
                    </div> 
                </div>
            </div>
            <div class="imgplace">
                <div class="bacimg"></div>
            </div>
        </div>
        
    </div>  
</template>

<script>
import router from '@/router'
import { ref , reactive, watch} from 'vue'
import { register } from '../api/index'
    export default {
        name: 'register',
        setup(){
            const option = reactive({optionArr: ['English(UK)', '简体中文']})
            let selected = ref(0)
            const changeText = reactive({
                des:"Sign Up",
                welcome: "Welcome to SPACEC!",
                logincommit:"Create Account",
                here:"HERE",
                loginBtn:"Create Account",
                underBtn:"Already have an account?",
                afterUnderBtn:"Login",
            })

            let username = ref("Name")
            let userPhoneNumber = ref("Phone Number")
            let userPassword = ref("Password")
            let userName = ref("")
            let phone = ref("")
            let password = ref("")

             //methods
            function selectLanguage(selected){
                if (selected === 1)
                {              
                    changeText.des = "注册"
                    changeText.welcome = "欢迎来到SPACEC!"
                    changeText.logincommit = "创建账户"
                    changeText.here = "这里"
                    changeText.loginBtn = "创建账户"
                    changeText.underBtn = "已经有账号了？"
                    changeText.afterUnderBtn = "登录"
                    username.value = "名称"
                    userPhoneNumber.value = "手机号"
                    userPassword.value = "密码"
                }

                if(selected === 0)
                {
                    changeText.des = "Log In"
                    changeText.welcome = "Welcome to SPACEC!"
                    changeText.logincommit = "Log into your account here"
                    changeText.here = "HERE"
                    changeText.loginBtn = "Enter"
                    changeText.underBtn = "Don't have an account yet?"
                    changeText.afterUnderBtn = "Register"
                    username.value = "Name"
                    userPhoneNumber.value = "Phone Number"
                    userPassword.value = "Password"
                }

            }

            function userRegister(){
                register(userName.value, phone.value, password.value)
                .then(success=>{
                    if(success.status === 0 && success.token)
                    {
                        window.localStorage.token = success.token
                        router.replace('/')
                    }
                    if(success.status === 0 && !success.token)
                    {
                        alert('111')
                        router.replace('/')
                    }

                    if(success.status === 1)
                    {
                        alert(success.message)
                    }
                })
                .catch(err=>{
                    alert("请求发送失败， 请稍后再试")
                })
            }

            function backindex(){
                router.replace('/')
            }
            
             //watch
            watch(selected, (newValue,oldValue)=>{
                selectLanguage(newValue);
            })

            return {
                option,
                selected,
                changeText,
                username,
                userPhoneNumber,
                userPassword,
                userName,
                phone,
                password,
                selectLanguage,
                userRegister,
                backindex,
            }
        }
    }
</script>

<style scoped>
*{
    margin: 0px;
    padding: 0px;
}

input{
    border:none;
    outline: medium;
}

button{
    border: none;
    text-align: center;
}

a{
    text-decoration: none;
}

select{
    border: none;
    outline: none;
}



.AllBox{
    height: 100vh;
    width: 100vm;
    background-color: #b0d8da;
}

.title{
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    padding: 20px;
    margin-left: 20px;
    color: #fff;
    font-size: 5em;
    font-weight: bolder;
}

.Gbox{
    width: 1310px;
    height: 710px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 450px;
    transform: translate(0%, -50%);
    border-radius: 30px;
    box-shadow: -10px 5px 30px #969e93e5;
    display: flex;
    justify-content: center;
    align-items: center;
}



.Fbox{
    width: 1300px;
    height: 700px;
    background-color: #b0d8da;
    border-radius: 30px;
    display: flex;
    justify-content: end;
    align-content: center;
}

.leftbox{
    width: 400px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.logo{
    margin-top: 20px;
    margin-left: 30px;
}

#something{
    color: #fff;
    margin-top: 30px;
    font-size: 1.5em;
    margin-left: 30px;
}

.Cbox{
    height: 100%;
    position: relative;
    background-color: #fff;
    width: 900px;
    margin-left: 1px;
    border-radius: 30px;
}

.languagebox{
    display: flex;
    justify-content: end;
}

.language{
    position: relative;
    top: 30px;
    left: -40px;
    color: #BFBFBF;
    font-size: 1em;

}

.CboxContent{
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.loginBox{
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    padding: 20px 200px;
}

.logincommit{
    color: #000;
    font-size: 1.5em;
    letter-spacing: 2px;
    font-weight: bolder;
}

.here{
    margin: 45px auto 20px auto;
    color: #BFBFBF;
    font-size: 1.1em;
}

.loginBox input{
    border-bottom: 1px solid #E8E8E8;
    height: 30px;
    margin: 18px;
    color: #BFBFBF;
    font-size: 1.1em;
}

.loginBox input::placeholder{
    color:  #BFBFBF;
}

.loginBtn{
    color: #fff;
    margin: 40px auto 0 auto;
    background-color: #b0d8da;
    width: 410px;
    height: 50px;
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: 2px;
    border-radius: 10px;
    box-shadow: -2px 1px 10px #BFBFBF;
}



.loginBtn:hover{
    color: #BFBFBF;
    background-color: #fff;
    border: 2px solid #b0d8da;
}

.toregister{
    margin-top: 40px;
    margin-left: 20px;
    color: #BFBFBF;
}

.register{
    color: #b0d8da;
}

.register:hover{
    color: #000;
}

.register:active{
    color: #b0d8da;
}

.registera:visited{
    color: #b0d8da;
}

.imgplace{
    position: absolute;
    left: -50px;
    top: 130px;
}


.bacimg{
    background-image: url("../../public/img/112.png");
    width: 700px;
    height: 600px;
    background-repeat: no-repeat;
    background-size: auto;

    transform: rotateY(180deg) scale(0.8);
}


</style>